<template>
  <el-timeline class="timeline-wrapper">
    <el-timeline-item v-for="(item, index) in list" :key="index">
      <template #dot>
        <div :class="[item.isChild ? 'timeline-dot-child' : 'timeline-dot']"></div>
      </template>
      <div class="timeline-date">
        <span :class="[item.isChild ? 'timeline-date-child' : 'timeline-date-parent']">
          {{ item.date }}
        </span>
      </div>
      <div class="timeline-content">
        <div v-if="!item.isChild" class="timeline-content-parent">
          <span class="timeline-content-week">{{ item.week }}</span>
          <span>{{ item.registrants }}</span>
        </div>
        <div v-else class="timeline-content-child">
          <div>
            <span class="timeline-content-label">{{ item.changedType }}：</span>
            <span class="timeline-content-value">{{ item.key }}</span>
          </div>
          <div class="timeline-content-process" v-if="item.before || item.after">
            <RichTextViewer
              v-if="item.key === '项目描述' || item.key === '任务详细说明'"
              :view-html="getViewHtml(item.before)"></RichTextViewer>
            <div v-else>{{ item.before || '空' }}</div>
            <SvgIcon class="svg-icon" name="arrow-down"></SvgIcon>
            <RichTextViewer
              v-if="item.key === '项目描述' || item.key === '任务详细说明'"
              :view-html="getViewHtml(item.after)"></RichTextViewer>
            <div v-else>{{ item.after || '空' }}</div>
          </div>
        </div>
      </div>
    </el-timeline-item>
  </el-timeline>
</template>

<script setup>
import dayjs from 'dayjs'
import { useDictionary } from '@/use/use-dictionary'
import { flatten } from '@/utils/task-utils'

const dict = useDictionary([
  'task_priority',
  'task_type',
  'task_status',
  'task_question_status',
  'task_question_leave',
  'task_question_type',
  'task_project_class',
])

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
  projectMemberList: {
    type: Array,
    default: () => [],
  },
  projectTreeData: {
    type: Array,
    default: () => [],
  },
})

const list = computed(() => {
  const arr = []
  props.data.forEach((item) => {
    const changedData = JSON.parse(item.changedData) || []
    const date = dayjs(item.createdTime).format('YYYY-MM-DD')
    changedData.forEach((i) => {
      i.date = dayjs(item.createdTime).format('A HH:mm')
      i.changedType = item.changedType
      i.isChild = true
      filterKey(i)
    })
    const target = arr.find((i) => i.date === date)
    if (target) {
      target.list.push(...changedData)
    } else {
      arr.push({
        date,
        week: dayjs(item.createdTime).format('ddd'),
        registrants: item.registrants,
        list: [...changedData],
      })
    }
  })
  return flatten(arr, 'list')
  // return arr
})

function filterKey(i) {
  if (i.key === '任务协助人' || i.key === '任务执行人' || i.key === '任务管理人' || i.key === '阶段负责人') {
    filterLabel({ data: i, type: 'user' })
  } else if (i.key === '当前状态') {
    filterLabel({ data: i, type: 'dict', dictType: 'task_status' })
  } else if (i.key === '质量单状态') {
    filterLabel({ data: i, type: 'dict', dictType: 'task_question_status' })
  } else if (i.key === '优先级' || i.key === '任务优先级') {
    filterLabel({ data: i, type: 'dict', dictType: 'task_priority' })
  } else if (i.key === '问题程度') {
    filterLabel({ data: i, type: 'dict', dictType: 'task_question_leave' })
  } else if (i.key === '问题类型数据字典') {
    filterLabel({ data: i, type: 'dict', dictType: 'task_question_type' })
  } else if (i.key === '任务类型') {
    filterLabel({ data: i, type: 'dict', dictType: 'task_type' })
  } else if (
    i.key === '计划开始时间' ||
    i.key === '计划结束时间' ||
    i.key === '阶段开始时间' ||
    i.key === '阶段结束时间' ||
    i.key === '项目计划开始时间' ||
    i.key === '项目计划结束时间'
  ) {
    filterLabel({ data: i, type: 'time' })
  } else if (i.key === '项目标签') {
    filterLabel({ data: i, type: 'json' })
  } else if (i.key === '项目分类') {
    filterLabel({ data: i, type: 'dict', dictType: 'task_project_class' })
  } else if (i.key === '项目集') {
    filterLabel({ data: i, type: 'project' })
  }
}

function filterLabel(config) {
  const { data, type, dictType } = config
  if (type === 'dict') {
    data.after = dict.translate(dictType, data.after)
    data.before = dict.translate(dictType, data.before)
  } else if (type === 'user') {
    let after = props.projectMemberList.find((item) => item.userId === parseInt(data.after))
    let before = props.projectMemberList.find((item) => item.userId === parseInt(data.before))
    data.after = after?.nickName
    data.before = before?.nickName
  } else if (type === 'time') {
    data.after = (data.after ? dayjs(data.after).format('YYYY-MM-DD') : '空') + ' ' + data.date
    data.before = (data.before ? dayjs(data.before).format('YYYY-MM-DD') : '空') + ' ' + data.date
  } else if (type === 'json') {
    data.before =
      data.before &&
      Array.isArray(JSON.parse(data.before)) &&
      JSON.parse(data.before)
        .map((item) => item.tagName)
        .join(',')
    data.after =
      data.after &&
      Array.isArray(JSON.parse(data.after)) &&
      JSON.parse(data.after)
        .map((item) => item.tagName)
        .join('，')
  } else if (type === 'project') {
    let after = props.projectTreeData.find((item) => item.projectId === data.after)
    let before = props.projectTreeData.find((item) => item.projectId === data.before)
    data.after = after?.projectName
    data.before = before?.projectName
  }
}

function getViewHtml(data) {
  if (data) {
    const getText = data
      .replace(/<[^<p>]+>/g, '') // 将所有<p>标签 replace ''
      .replace(/<[</p>$]+>/g, '') // 将所有</p>标签 replace ''
      .replace(/&nbsp;/gi, '') // 将所有 空格 replace ''
      .replace(/<[^<br/>]+>/g, '')
      .trim()
    return getText ? data : '<span>空</span>'
  } else {
    return '<span>空</span>'
  }
}
</script>

<style scoped lang="scss">
.dynamic {
  position: relative;
  word-break: break-all;
  padding: 5px;
  margin: 0;
  li {
    list-style: none;
    padding-top: 10px;
    .dynamic-date {
      color: var(--elp-text-color-placeholder);
    }
    .dynamic-section {
      padding: 5px;
      .section-user-name {
        @include use-flex(center, normal, row);
        .icon {
          width: 20px;
          height: 20px;
          border-radius: 50%;
          background-color: #758406;
          font-size: 10px;
          line-height: 20px;
          text-align: center;
          margin-right: 5px;
        }
        .name {
          padding-left: 6px;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }
      .section-content {
        padding-left: 20px;
        margin-top: 0;
        .item-content {
          padding-left: 20px;
        }
        .item-summary {
          padding: 10px 0 0 12px;
          @include use-flex(normal, normal, row);
          span {
            margin-right: 5px;
          }
          .item-date {
            color: var(--elp-text-color-placeholder);
            font-size: 12px;
          }
        }
      }
    }
  }
}

.timeline-wrapper {
  :deep(.elp-timeline-item) {
    margin-left: 60px;
  }

  :deep(.elp-timeline-item__dot) {
    left: -3px;
  }
  .timeline-dot {
    width: 16px;
    height: 16px;
    background-color: #005fff;
    border-radius: 50%;
    border: 3px solid #bdd6ff;
  }
  .timeline-dot-child {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #bdd6ff;
    border: 3px solid #fff;
  }
  .timeline-date {
    width: 90px;
    position: absolute;
    left: -100px;
    // top: 1px;
    text-align: right;
    &-parent {
      font-size: 16px;
      color: #777c85;
      line-height: 24px;
      font-weight: 500;
    }
    &-child {
      font-size: 14px;
      color: #959ba6;
      line-height: 21px;
    }
  }

  .timeline-content {
    font-size: 14px;
    line-height: 21px;
    &-label {
      font-weight: 700;
      color: #141414;
    }
    &-value {
      color: #141414;
    }
    &-week {
      display: inline-block;
      margin-right: 10px;
    }
    &-parent {
      font-weight: 700;
      color: #141414;
    }
    &-process {
      margin-top: 10px;
      // text-align: center;
      color: #777c85;
      .item-content {
        text-align: center;
      }
    }
  }
}
</style>
